<template>
  <view>
    <hjb-upload ref="upload" name="file" action="/upload" :limit="limit" :file-list="fileList" :on-change="uploadChange"
      :on-remove="remove" :multiple="multiple" width="148" height="148" :fileType="fileType">
    </hjb-upload>
  </view>
</template>

<script>
  import {
    uploadImage
  } from "@/api/upload";
  // import configService from "@/common/service/config.service.js";
  import hjbUpload from "@/components/hjb-upload/hjb-upload.vue";

  export default {
    props: {
      label: {
        type: String,
        default: "",
      },
      placeholder: {
        type: String,
        default: "上传正面照",
      },
      type: {
        type: String,
        default: "idcard",
      },
      multiple: {
        type: Boolean,
        default: false,
      },
      limit: {
        type: Number,
        default: 1,
      },
      fileList: {
        type: Array,
        default: [],
      },
      fileType: {
        type: Array,
        default () {
          // 支付宝小程序真机选择图片的后缀为"image"
          // https://opendocs.alipay.com/mini/api/media-image
          return [];
        },
      },
    },
    components: {
      hjbUpload
    },
    data() {
      return {
        imgList: [],
        defaultPic: "/static/images/camera_icon.png",
        idList: [],
        // fileList: [],
      };
    },
    methods: {
      uploadChange(file, fileList) {
        const _that = this;
        console.log("file", file);
        console.log("fileList", fileList);
        uploadImage(file.url)
          .then((res) => {
            const data = JSON.parse(res)
            if (data.success) {
              const imgId = data.result;
              _that.idList = _that.idList.concat(imgId);

              this.$emit("upload", {
                type: this.type,
                fileUrl: _that.idList.join(","),
              });
            } else {
              this.$tip.toast(data.message);
            }
          })
          .catch((res) => {
            console.log("res", res);
            this.$tip.toast(res.data.message);
          });
      },
      ChooseImage() {
        const _that = this;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], //从相册选择
          success: (res) => {
            uploadImage(res.tempFilePaths[0]).then((data) => {
              const imgId = JSON.parse(data).result;
              const imgUrl = configService.picUrl + imgId;

              _that.imgList = _that.imgList.concat(imgUrl);
              _that.idList = _that.idList.concat(imgId);
              console.log("-------img", this.imgList.length);
              this.$emit("upload", {
                type: this.type,
                fileUrl: _that.idList.join(","),
              });
            });
          },
        });
      },
      changeVal(e) {
        // uniapp自带emit失效??
        this.$emit("change", e.target.value);
        //改用自定义订阅
        // pub.$pub('changeKey',e.target.value)
      },
      remove(e, list, index) {
        this.idList = this.idList.filter((i, x) => x !== index)
        console.log(this.idList, index)
        this.$emit("remove", index)
      }
    },
  };
</script>

<style scoped lang="scss">
  .scroll {
    height: 148upx;

    &_img {
      width: 180upx;
      height: 148upx;
      display: inline-block;
      margin-right: 20upx;

      image {
        width: 180upx;
      }
    }

    &_no-pic {
      width: 180upx;
      height: 148upx;
      display: inline-block;
      text-align: center;
      background-color: #f6f8f9;

      &_view {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 180upx;
        height: 148upx;
      }
    }
  }
</style>